<template>
  <div class="container">
    <van-row>
      <van-col :span="6" class="menu">
        <van-badge-group :active-key="active">
          <van-badge @click="click(item)" v-for="item in menu" :key="item.id" :title="item.title"></van-badge>
        </van-badge-group>
      </van-col>
      <van-col :span="18" style="float: right;padding: 10px;">
        <van-row gutter="20">
          <van-col :span="8" v-for="item in category" :key="item.id" class="item">
            <router-link to="">
              <img class="pending-payment" :src="item.thumb" width="100%"/>
              {{item.title}}
            </router-link>
          </van-col>
        </van-row>
      </van-col>
    </van-row>
    <FooterNav></FooterNav>
  </div>
</template>
<script>
  import FooterNav from "./Common/FooterNav"

  export default {
    components: {FooterNav},
    data: function () {
      return {
        active: 0,
        menu: [
          {
            id: 0,
            spuId: 109230000,
            title: '12.12专区',
          },
          {
            id: 1,
            spuId: 109230001,
            title: '冬季专区',
          },
          {
            id: 2,
            spuId: 109230002,
            title: '爆品专区',
          },
          {
            id: 3,
            spuId: 109230003,
            title: '新品专区',
          },
          {
            id: 4,
            spuId: 109230004,
            title: '居家',
          },
          {
            id: 5,
            spuId: 109230005,
            title: '鞋包配饰',
          },
          {
            id: 6,
            spuId: 109230006,
            title: '服装',
          },
          {
            id: 7,
            spuId: 109230007,
            title: '电器',
          },
          {
            id: 8,
            spuId: 109230008,
            title: '洗护',
          },
          {
            id: 9,
            spuId: 109230009,
            title: '饮食',
          },
          {
            id: 10,
            spuId: 109230010,
            title: '餐厨',
          }
        ],
        category: [
          {
            id: 1,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          },
          {
            id: 2,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          },
          {
            id: 3,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          },
          {
            id: 4,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          },
          {
            id: 5,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          },
          {
            id: 6,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          },
          {
            id: 7,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          },
          {
            id: 8,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          },
          {
            id: 9,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          },
          {
            id: 10,
            title: '三石福利价',
            thumb: 'http://yanxuan.nosdn.127.net/39c1c32ca2301ced934e35db33150637.png?imageView&quality=85&thumbnail=144x144',
            spuId: '109230000'
          }
        ]
      }
    },
    created: function () {
      this.active = this.menu[0]['spuid'];
    },
    methods: {
      click: function (item) {
        this.active = item.id;
        console.log(item.spuId)
      }
    }
  }
</script>
<style>
  a:visited {
    color: #333;
  }

  .menu {
    font-size: .1rem !important;
    position: fixed;
    display: block;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50px;
  }

  .van-icon {
    display: block;
    font-size: 24px;
  }

  .item {
    text-align: center;
    font-size: .3rem;
  }
</style>
